<template>
	<div class="monaco">
		<div :ref="id" :style="{ height: height + 'px' }"></div>
	</div>
</template>

<script>
import * as monaco from 'monaco-editor'
export default {
	name: 'Monaco',
	mounted() {
		this.initMonaco()
		this.$bus.$on('createMonacoInstance', () => {
			this.initMonaco()
		})
		this.$bus.$on('setLanguage', language => {
			if (this.$monacoInstance) {
				let model = this.$monacoInstance.getModel()
				if (model && model.uri) {
					monaco.editor.setModelLanguage(model, language)
				}
			}
		})
	},
	props: {
		value: {
			type: String,
			default: '',
		},
		height: {
			type: Number,
			default: 300,
		},
		language: {
			type: String,
			default: 'json',
		},
		readOnly: {
			type: Boolean,
			default: true,
		},
		id: {
			type: String,
			default: 'monaco',
		},
	},
	watch: {
		value(val) {
			if (val) {
				if (this.$monacoInstance) {
					this.$monacoInstance.getModel().setValue(val)
				}
			}
		},
	},
	methods: {
		initMonaco() {
			let that = this
			if (that.$refs && that.$refs[that.id]) {
				if (that.$monacoInstance) {
					that.$monacoInstance.dispose()
				}
				that.$monacoInstance = monaco.editor.create(that.$refs[that.id], {
					value: that.addBackspace(that.value),
					language: that.language,
					theme: 'hc-black',
					automaticLayout: true,
					readOnly: that.readOnly,
					wordWrap: 'on',
					folding: true,
					contextmenu: 'false',
					layoutInfo: {
						height: 300,
						width: 200,
					},
				})
				that.$monacoInstance.onDidBlurEditorText(() => {
					if (that.$monacoInstance) {
						let val = that.$monacoInstance.getModel().getValue()
						that.$emit('blur', val)
					}
				})
			}
		},
		addBackspace(result) {
			if (this.language === 'json') {
				return result
			} else {
				return result
			}
		},
	},
	beforeDestroy() {
		if (this.$monacoInstance) {
			this.$monacoInstance.dispose()
		}
	},
}
</script>